<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/user_style.css" rel="stylesheet" type="text/css" />
    <!--导入vue 包-->
    <script src="vue/Vue.v2.6.12.js"></script>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script src="js/common_js.js" type="text/javascript"></script>
<script src="js/footer.js" type="text/javascript"></script>
<script src="layer/layer.js" type="text/javascript"></script>

    <!--自定义工具-->
    <script src="js/HttpUtil.js"></script>
    <!--参数校验工具-->
    <script src="validation-1.19.2/jquery.validate.min.js"></script>
    <script src="validation-1.19.2/localization/messages_zh.min.js"></script>

<title>用户中心</title>
</head>

<body>
<head>
    <div id="header_top">
        <div id="top">
            <div class="Inside_pages">
                <div class="Collection"><a href="login.html" class="green">请登录</a> <a href="register.html" class="green">免费注册</a></div>
                <div class="hd_top_manu clearfix">
                    <ul class="clearfix">
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"> <a href="user_center.html">用户中心</a> </li>
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="message_center.html">消息中心</a></li>
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="goodsList.html">商品分类</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="header"  class="header page_style">
            <div class="logo"><a href="index.html"><img src="images/logo.png" /></a></div>

            <!--结束图层-->
            <div class="Search">
                <div class="search_list">
                    <ul>
                        <li class="current"><a href="#">产品</a></li>
                        <li><a href="#">信息</a></li>
                    </ul>
                </div>
                <div class="clear search_cur">
                    <input name="searchName" id="searchName" class="search_box" onkeydown="keyDownSearch()" type="text">
                    <input name="" type="submit" value="搜 索"  class="Search_btn"/>
                </div>
                <div class="clear hotword">热门搜索词：香醋&nbsp;&nbsp;&nbsp;茶叶&nbsp;&nbsp;&nbsp;草莓&nbsp;&nbsp;&nbsp;葡萄&nbsp;&nbsp;&nbsp;菜油</div>
            </div>

        </div>

        <!--菜单栏-->
        <div class="Navigation" id="Navigation"  style="padding-left: 420px;">
            <ul class="Navigation_name">
                <li><a href="index.html">首页</a></li>
                <li class="hour"><a href="半小时圈主页.html">半小时生活圈</a></li>
                <li><a href="产品-产品列表(预售).html">预售专区</a><em class="hot_icon"></em></li>
                <li><a href="店铺首页.html">好评商户</a></li>
                <li><a href="goodsList.html">热销活动</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </div>
        <script>$("#Navigation").slide({titCell:".Navigation_name li",trigger:"click"});</script>
    </div>
</head>
<!--用户中心样式-->
<div class="user_style clearfix">
 <div class="user_center clearfix">
 <div class="left_style">
     <div class="menu_style">
     <div class="user_title"><a href="user_center.html">用户中心</a></div>
     <div class="user_Head">
     <div class="user_portrait">
      <a href="#" title="修改头像" class="btn_link"></a> <img src="images/people.png">
      <div class="background_img"></div>
      </div>
      <div class="user_name">
       <p><span class="name">王五</span><a href="update_password.html">[修改密码]</a></p>
       <p>访问时间：2016-1-21 10:23</p>
       </div>           
     </div>
     <!--菜单列表图层-->
     <div class="sideMen">
     <dl class="accountSideOption1">
      <dt class="transaction_manage"><em class="icon_1"></em>订单管理</dt>
      <dd>
        <ul>
          <li> <a href="user_order.html">我的订单</a></li>
          <li> <a href="address.html">收货地址</a></li>
        </ul>
      </dd>
    </dl>
     <dl class="accountSideOption1">
      <dt class="transaction_manage"><em class="icon_2"></em>会员管理</dt>
        <dd>
      <ul>
        <li><a href="#">用户信息</a></li>
        <li><a href="#">我的收藏</a></li>
        <li><a href="#">我的留言</a></li>
        <li><a href="#">我的评论</a></li>
      </ul>
    </dd>
    </dl>
     <dl class="accountSideOption1">
      <dt class="transaction_manage"><em class="icon_3"></em>账户管理</dt>
      <dd>
       <ul>
       <li><a href="user_information.html">用户信息</a></li>
       <li><a href="update_password.html">修改密码</a></li>
       <li><a href="user_account_management.html">账户余额</a></li>
        <li><a href="user_account_management.html">消费记录</a></li>
       <li><a href="#">跟踪包裹</a></li>
       <li><a href="#">资金管理</a></li>
      </ul>
     </dd>
    </dl>
    </div>
      <script>jQuery(".sideMen").slide({titCell:"dt", targetCell:"dd",trigger:"click"
          ,defaultIndex:0,effect:"slideDown",delayTime:300,returnDefault:true});</script>
     </div>
   <!--浏览记录样式-->
    <div class="us_Records">
	  <div id="Record_ps" class="Record_p">
          <div class="title_name"><span class="name left">浏览历史</span><span class="pageState right"></span></div>
	      <div class="hd"><a class="next">&lt;</a><a class="prev">&gt;</a></div>
            <div class="bd">
                <ul >
                <li>
                   <div class="p_width">
                    <div class="pic"><a href=""><img src="Products/P_1.jpg"></a></div>
                    <div class="title"><a href="#">金龙鱼 东北大米 蟹稻共生 盘锦大米5KG</a></div>
                    <div class="Purchase_info"><span class="p_Price">￥32.50</span> <a href="#" class="Purchase">立即购买</a></div>
                </div>
                    </li>
                <li >
                <div class="p_width">
                    <div class="pic"><a href=""><img src="Products/P_12.jpg"></a></div>
                    <div class="title"><a href="#">金龙鱼 东北大米 蟹稻共生 盘锦大米5KG</a></div>
                    <div class="Purchase_info"><span class="p_Price">￥32.50</span> <a href="#" class="Purchase">立即购买</a></div>
                </div>
                </li>
                    <li >
                        <div class="p_width">
                    <div class="pic"><a href=""><img src="Products/P_23.jpg"></a></div>
                    <div class="title"><a href="#">金龙鱼 东北大米 蟹稻共生 盘锦大米5KG</a></div>
                    <div class="Purchase_info"><span class="p_Price">￥32.50</span> <a href="#" class="Purchase">立即购买</a></div>
                </div>
                    </li>
                    <li >
                        <div class="p_width">
                    <div class="pic"><a href=""><img src="Products/P_4.jpg"></a></div>
                    <div class="title"><a href="#">金龙鱼 东北大米 蟹稻共生 盘锦大米5KG</a></div>
                    <div class="Purchase_info"><span class="p_Price">￥32.50</span> <a href="#" class="Purchase">立即购买</a></div>
                </div>
                    </li>
                    <li>
                        <div class="p_width">
                    <div class="pic"><a href=""><img src="Products/P_5.jpg"></a></div>
                    <div class="title"><a href="#">金龙鱼 东北大米 蟹稻共生 盘锦大米5KG</a></div>
                    <div class="Purchase_info"><span class="p_Price">￥32.50</span> <a href="#" class="Purchase">立即购买</a></div>
                </div>
                    </li>
                        <li>
                        <div class="p_width">
                    <div class="pic"><a href=""><img src="Products/P_8.jpg"></a></div>
                    <div class="title"><a href="#">金龙鱼 东北大米 蟹稻共生 盘锦大米5KG</a></div>
                    <div class="Purchase_info"><span class="p_Price">￥32.50</span> <a href="#" class="Purchase">立即购买</a></div>
                </div>
                    </li>
                        <li >
                        <div class="p_width">
                    <div class="pic"><a href=""><img src="Products/P_1.jpg"></a></div>
                    <div class="title"><a href="#">金龙鱼 东北大米 蟹稻共生 盘锦大米5KG</a></div>
                    <div class="Purchase_info"><span class="p_Price">￥32.50</span> <a href="#" class="Purchase">立即购买</a></div>
                </div>
                    </li>
                        <li>
                        <div class="p_width">
                    <div class="pic"><a href=""><img src="Products/P_6.jpg"></a></div>
                    <div class="title"><a href="#">金龙鱼 东北大米 蟹稻共生 盘锦大米5KG</a></div>
                    <div class="Purchase_info"><span class="p_Price">￥32.50</span> <a href="#" class="Purchase">立即购买</a></div>
                </div>
                    </li>
                    <li>
                <div class="p_width">
                    <div class="pic"><a href=""><img src="Products/P_11.jpg"></a></div>
                    <div class="title"><a href="#">金龙鱼 东北大米 蟹稻共生 盘锦大米5KG</a></div>
                    <div class="Purchase_info"><span class="p_Price">￥32.50</span> <a href="#" class="Purchase">立即购买</a></div>
                </div>
                </li>
                </ul>
                </div>
         </div>
         <script type="text/javascript">jQuery("#Record_ps").slide({mainCell:".bd ul",autoPage:true,effect:"leftLoop",vis:1,autoPlay:false });</script>
	    </div>
   
 </div>
 <div class="right_style" id="vue_list">
     <div class="info_content">
     <div class="user_info">
      <ul class="">
       <li class="Balance"><a href="#"><img src="images/user_img_05.png" /><h4>余额：￥{{ DaoMassage.balance }}</h4></a></li>
       <li class="Order_form"><a href="#"><img src="images/user_img_04.png" /><h4>订单：({{ orderLength }})</h4></a></li>
       <li class="grade"><a href="#"><img src="images/user_img_08.png" /><h4>3</h4></a></li>
       <li class="Favorable"><a href="#"><img src="images/user_img_07.png" /><h4>钻石会员</h4></a></li>
       <li class="integral"><a href="#"><img src="images/user_img_06.png" /><h4>{{ DaoMassage.integral }}分</h4></a></li>
      </ul>
     </div>
     <!--样式-->
     <div class="user_info_p_s  clearfix">
       <!--订单记录-->
       <div class="left_user_cont">
     <div class="us_Orders left clearfix">
  <div class="Orders_name">
   <div class="title_name">
   <div class="Records">购买记录</div>
   <div class="right select">
   只记录你最近30天的购买记录   </div>
   </div>   
  </div>
  <table>
  <thead>
  <tr>
   <th>产品名称</th>
   <th>数量</th>
   <th>状态</th>
   <th>操作</th>
   </tr>
  </thead>
  <tbody>
    <tr  v-for="(item,index) in all_list" v-if="index>=yie&&index<yie+3">
    <td class="img_link">
        <div v-for="(ite,i) in item.good" V-if="i<3">
            <a href="#" class="img" :title="ite.goodName"><img :src="ite.goodImg" width="80" height="80"></a>
            <i class="icon-copy"></i>
        </div>
	</td>
	<td>{{ orderLength }}</td>
	<td>{{ item.orderStatus }}</td>
	<td><a href="#" class="View">查看</a></td>
   </tr>
   </tbody>
  </table>
         <div style="width: 20px; cursor:pointer; height: 20px;
          margin: 3px; float: left; text-align: center;
           border: solid 2px #ff1100" v-for="(item,index) in all_list" v-if="(index)%3==0" @click="getSome(index)">
             {{ (index)/3+1 }}
         </div>
   <div class="us_jls">共{{ orderLength }}条记录</div>
  </div>
    </div>
     </div>
   <!--结束-->       
    </div>
 
  </div>
 </div>
</div>
<!--网站地图-->
<div class="fri-link-bg clearfix">
    <div class="fri-link">
        <div class="logo left margin-r20"><img src="images/fo-logo.jpg" width="152" height="81" /></div>
        <div class="left"><img src="images/qd.jpg" width="90"  height="90" />
            <p>扫描下载APP</p>
        </div>
       <div class="">
    <dl>
	 <dt>新手上路</dt>
	 <dd><a href="#">售后流程</a></dd>
     <dd><a href="#">购物流程</a></dd>
     <dd><a href="#">订购方式</a> </dd>
     <dd><a href="#">隐私声明 </a></dd>
     <dd><a href="#">推荐分享说明 </a></dd>
	</dl>
	<dl>
	 <dt>配送与支付</dt>
	 <dd><a href="#">保险需求测试</a></dd>
     <dd><a href="#">专题及活动</a></dd>
     <dd><a href="#">挑选保险产品</a> </dd>
     <dd><a href="#">常见问题 </a></dd>
	</dl>
	<dl>
	 <dt>售后保障</dt>
	 <dd><a href="#">保险需求测试</a></dd>
     <dd><a href="#">专题及活动</a></dd>
     <dd><a href="#">挑选保险产品</a> </dd>
     <dd><a href="#">常见问题 </a></dd>
	</dl>
	<dl>
	 <dt>支付方式</dt>
	 <dd><a href="#">保险需求测试</a></dd>
     <dd><a href="#">专题及活动</a></dd>
     <dd><a href="#">挑选保险产品</a> </dd>
     <dd><a href="#">常见问题 </a></dd>
	</dl>	
    <dl>
	 <dt>帮助中心</dt>
	 <dd><a href="#">保险需求测试</a></dd>
     <dd><a href="#">专题及活动</a></dd>
     <dd><a href="#">挑选保险产品</a> </dd>
     <dd><a href="#">常见问题 </a></dd>
	</dl>
     <dl>
	 <dt>帮助中心</dt>
	 <dd><a href="#">保险需求测试</a></dd>
     <dd><a href="#">专题及活动</a></dd>
     <dd><a href="#">挑选保险产品</a> </dd>
     <dd><a href="#">常见问题 </a></dd>
	</dl>
           <dl></dl>
		   
   </div>
    </div>
</div>
<!--网站地图END-->
<!--网站页脚-->
<div class="copyright">
    <div class="copyright-bg">
        <div class="hotline">为生活充电在线 <span>招商热线：****-********</span> 客服热线：400-******</div>
        <div class="hotline co-ph">
            <p>版权所有Copyright ©***************</p>
            <p>*ICP备***************号 不良信息举报</p>
            <p>总机电话：****-*********/194/195/196 客服电话：4000****** 传 真：********
                
                <a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
        </div>
    </div>
</div>
</body>
</html>

<script>

    let user = getCookie("userMassage");
    if (user==null){
        alert("用户未登录，请登录");
        location.href='/views/user_view/login.html';
    }

    var vm2 = new Vue({
        el: '#vue_list',
        data: {
            all_list: [],         /*所有订单*/
            orders_list: [],      /*订单所有信息*/
            userMessage: [],      /*用户登录信息*/
            DaoMassage: [],       /*数据库用户信息*/
            orderLength: 0,       /*数据库用户信息*/
            yie: 0,
        },
        methods: {
            /*确认发货按钮*/
            getGoodsOrderList: function () {
                let vue_quote = this;

                //获取用户登录信息
                var cookie = getCookie("userMassage");
                var user = JSON.parse(cookie);
                vue_quote.userMessage=user;

                /*let url = "/getSomeOrder.do";
                let params = {userId: this.userMessage.userID,page: 1};
                postWithParams(url,params,function (data) {
                    console.log(data);
                    vue_quote.orderLength=data.length;
                    vue_quote.orders_list=data;
                });*/

                let url1 = "/login/check.do";
                let params1 = {userName: this.userMessage.userName, password: this.userMessage.password, type: "5"};
                postWithParams(url1,params1,function (data) {
                    console.log(data);
                    vue_quote.DaoMassage=data;
                });

                let url2 = "/order/getSomeOrder.do";
                let params2 = {userId: this.userMessage.userID,page: 1};
                postWithParams(url2,params2,function (data) {
                    console.log(data);
                    vue_quote.all_list=data;
                    vue_quote.orderLength=data.length;
                });
            },

            getSome: function (sta) {
                let vue_quote = this;
                console.log(sta)
                vue_quote.yie=sta;
                let url = "/getSomeOrder.do";
                let params = this.userMessage.userID+"："+sta;
                /*postWithJson(url,params,function (data) {
                    console.log(data);
                    vue_quote.orderLength=data.length;
                    vue_quote.orders_list=data;
                });*/
            }
        },
        /**页面加载完成后调用*/
        mounted: function () {
            this.getGoodsOrderList();
        }
    });
</script>